<template>
	<view>
		<!-- order.orderType： 1--图文咨询 3--免费咨询  -->
		<!-- info.status -- 图文咨询-1待接诊,2问诊中,3已拒单,4已退诊,5已结束,6自动已退单 -->
		<!-- order.payStatus--0已支付,1未支付 -->
		<view class="bg_image" v-if="order.payStatus==1">
			<view class="appointment">待付款
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">您当前未付款，请及时支付</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==1">
			<view class="appointment">待接诊
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">已付款，等待医生接诊</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==2">
			<view class="appointment">问诊中
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">正在与医生问诊中</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==3">
			<view class="appointment">已拒单
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">医生已拒单</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==4">
			<view class="appointment">已退诊
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">您已主动退诊</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==5">
			<view class="appointment">已结束
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">医生问诊已结束</view>
		</view>
		<view class="bg_image" v-else-if="order.payStatus==0&&info.status==6">
			<view class="appointment">问诊超时
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">超时未处理，系统已自动退单</view>
		</view>
		<view class="bg_image" v-else>
			<view class="appointment">已取消
				<text style="font-size: 26rpx;margin-left: 20rpx;">
					{{order.orderType==1?"图文咨询":(order.orderType == 3?'免费咨询' : "用药咨询")}}
				</text>
			</view>
			<view class="prompt_font">已取消订单</view>
		</view>

		<view class="card_content card_one">
			<view class="peopinfoContent">
				<view style="float: left">
					<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="order.doctorImg"></image>
				</view>
				<view class="peopinfo">
					<text style="font-weight: bold;">{{order.doctorName?order.doctorName:""}}</text>
					<text class="phone">{{order.hospitalName?order.hospitalName:""}}</text>
				</view>
				<view class="addressinfo peopinfo">
					<text style="font-size: 28rpx;">{{order.jobTitle?order.jobTitle:""}} | {{order.deptName?order.deptName:""}}</text>
				</view>
			</view>

			<view class="personal_info pa_top personalfont" @click="peopleInfo">
				<view>就诊人信息</view>
				<view style="display: flex;">
					<view style="font-weight: bold;font-size: 28rpx;">{{info.patientName?info.patientName:""}} | {{info.sex==1?"男":info.sex==2?"女":''}} |
						{{info.age?info.age:""}}岁
					</view>
					<!-- <image style="width: 40rpx;height: 30rpx;margin-top: 5rpx;"
						src="../static/images/icon_right_black.png"></image> -->
				</view>

			</view>
		</view>
		<view class="card_content">
			<view class="title_1">问诊资料</view>
			<view>确诊疾病</view>
			<view class="personal_info">
				<text class="specification gray_font">{{info.confirmedDisease?info.confirmedDisease:""}}</text>
			</view>
			<view style="margin-top: 20rpx;">病情描述</view>
			<view class="personal_info">
				<text class="specification gray_font">{{info.illnessConetxt?info.illnessConetxt:""}}</text>
			</view>
			<view style="margin-top: 20rpx;">检查资料</view>
			<view class="datum">
				<view v-for="itme in info.images" style="padding-right: 7rpx;">
					<image @click="previewImg(itme)" style="width: 120rpx;height: 120rpx;" :src="itme"></image>
				</view>
			</view>

		</view>
		<view class="card_content">
			<view>订单详情</view>
			<view class="personal_info specification">
				<text class="gray_font">支付金额</text>
				<text class="medicalName">￥{{order.payPrice}}</text>
			</view>
			<view class="personal_info specification">
				<text class="gray_font">订单号</text>
				<text class="real_payment medicalName">{{order.orderNumber}}</text>
			</view>
		</view>
		<!--        <button v-if="order.payStatus==1"-->
		<!--                @click="appointment"-->
		<!--                class="btn_appointment arc_button"-->
		<!--                type="default">立即支付</button>-->
	</view>
</template>

<script>
	import {
		consultationDetail
	} from '@/api/service.js';
	import {
		consultOrderInfo
	} from '@/api/consult.js';
	export default {
		data() {
			return {
				drugcontent: [],
				info: {},
				order: {},
				choosePeopleInfo: {},
				adderss: {},
				provinces: {},
				diagnosisLists: [],
				entrusts: "",
				sum: 0
			}
		},
		onLoad: function(option) {
			console.log(option);
			if (option.consultId) {
				this.consultationDetail(option.consultId);
			}
			if (option.orderId) {
				this.consultOrderInfo(option.orderId);
			}
		},
		methods: {
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
				current: 0,
				urls: imgsArray
				});
			},
			// 图文咨询详情
			consultationDetail(val) {
				uni.showLoading({
					title: '加载中'
				});
				consultationDetail(val).then(res => {
						this.info = res.data;
						console.log("&&&&&infoinfo",JSON.stringify(this.info))
						uni.hideLoading();
					})
					.catch(err => {
						console.log("错误#", res)
						uni.hideLoading();
					});
			},
			// 用药咨询订单详情
			consultOrderInfo(val) {
				uni.showLoading({
					title: '加载中'
				});
				consultOrderInfo(val).then(res => {
						this.order = res.data;
						uni.hideLoading();
					})
					.catch(err => {
						console.log("错误#", res)
						uni.hideLoading();
					});
			},
			peopleInfo() {
				uni.navigateTo({
					url: `./prechoosepeople`
				})
			},
			//去预约
			appointment(id) {
				uni.navigateTo({
					url: `/pagesSub/homePage/consult/consulOrder?id=` + this.order.id
				})
			},

		}
	}
</script>

<style scoped>
	.bg_image {
		background-image: url(../static/images/bg_menzhen@2x.png);
		height: 200rpx;
		background-size: 100% 100%;
		color: #FFFFFF;
		padding: 30rpx;
	}

	.appointment {
		font-weight: 600;
	}

	.peopinfoContent {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #FBFBFB;
	}

	.peopinfo {
		font-size: 33rpx;
		margin-left: 100rpx;
	}

	.prompt_font {
		font-size: 29rpx;
		margin-top: 5rpx;
	}

	.card_content {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 10rpx;
	}

	.card_one {
		margin-top: -100rpx;
	}

	.phone {
		margin-left: 30rpx;
		font-size: 28rpx;
	}

	.addressinfo {
		font-size: 32rpx;
		margin-top: 5rpx;
	}

	.personal_info {
		display: flex;
		justify-content: space-between;
	}

	.medical_content {
		display: flex;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #FBFBFB;
		padding-bottom: 30rpx;
	}

	.medical_img {
		width: 200rpx;
		height: 120rpx;
	}

	.medical_img image {
		width: 100%;
		height: 100%;
	}

	.medical_right {
		margin-left: 30rpx;
		width: 100%;
	}

	.medical_title {
		display: flex;
		justify-content: space-between;
	}

	.pa_top {
		margin-top: 20rpx;
	}

	.medical_price {
		float: right;
		color: #D57667;
		font-weight: 600;
		font-size: 33rpx;
	}

	.real_payment {
		color: #D57667;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 70rpx;
	}

	.bth_green {
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border: 1rpx solid #4CCCBF;
		background-color: #FFFFFF;
		color: #4CCCBF;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		padding: 0 25rpx;
	}

	.add_medical {
		display: flex;
		color: #4CCCBF;
		text-align: center;
		font-size: 30rpx;
		margin-top: 40rpx;
		margin-left: 40%;
	}

	.btn_appointment {
		margin-top: 40rpx;
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		color: #FFFFFF;
	}

	.personalfont {
		font-size: 32rpx;
	}

	.green_font {
		color: #4CCCBF;
	}

	.addressName {
		font-size: 33rpx;
		margin-top: 20rpx;
	}

	.medicalName {
		font-size: 31rpx;
	}

	.specification {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.icon_greenadd {
		width: 35rpx;
		height: 35rpx;
	}

	.title_1 {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #ededed;
	}
	.datum{
		display: flex;
		flex-wrap: wrap;
	}
	.datum::after{
		display: block;
		clear: both;
		content: "";
	}
</style>
